<template>
    <div class="app-container">


      <el-dialog
        append-to-body
        :visible.sync="dialogVisible"
        width="35%"
      >
        <img :src="url" alt="" style="width: 100%">
      </el-dialog>

      <!-- 添加或修改数据对话框 style="min-height: 1000px;max-height: 1200px;"-->
      <el-dialog :title="title" :visible.sync="open" width="1500px"  :close-on-click-modal='false' @close="closeDialog" :modal='modalFlag' >

        <el-dialog
          append-to-body
          :visible.sync="dialogVisible"
          width="35%"
        >
          <img :src="url" alt="" style="width: 100%">
        </el-dialog>

        <el-dialog  class="group_dialog" width="30%" title="分组信息" :visible.sync="innerVisible" append-to-body>
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="素材分组名称" prop="groupName">
              <el-input v-model="form.groupName"   placeholder="请输入素材分组名称" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancelDialog">取 消</el-button>
          </div>
        </el-dialog>

        <el-form ref="form" :model="form" :rules="rules" label-width="80px" >
          <el-form-item style="margin-bottom: 10px;">
            <el-button  icon="el-icon-plus" @click="addGroup">添加分组</el-button>
          </el-form-item>
          <el-form-item>
            <el-container style="min-height: 700px;">
              <el-aside style="height: 700px;">
                <el-select v-model="chooseGroup" @change="getChooseGroup" filterable placeholder="请选择素材分组">
                  <el-option
                    v-for="group in groupRecords"
                    :key="group.groupKey"
                    :label="group.groupName"
                    :value="group.groupKey">
                  </el-option>
                </el-select>
                <el-container>
                  <el-footer style="margin-top: 500px">
                    <el-tag type="info">注：如果下拉框没有需要的分组,</el-tag><br><el-tag type="info">可点击上面的添加分组，进行创建</el-tag>
                  </el-footer>
                </el-container>
              </el-aside>
              <el-main>
                <el-main style="width:100%;height:100%;background-color:#fff;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); border-radius: 6px;">
                  <div style="height: 30px">
                    <span style="display: block;float: left;padding-right: 10px">{{chooseGroupName}}</span>
                    <el-button style="float: left;padding: 10px 0px;" size="mini" type="text" icon="el-icon-edit" @click="changeGroupName" v-show="deleteFlag">重命名</el-button>
                    <el-button style="float: left;padding: 10px 0px;" size="mini" type="text" icon="el-icon-delete" @click="deleteGroup" v-show="deleteFlag">删除</el-button>
                    <el-upload v-show="deleteFlag"
                      multiple
                      :action="upload.uploadUrl"
                      :headers="upload.headers"
                      :data="upload.uploadParams"
                      :before-upload="dealUploadParams"
                      :on-success="selectFileInfoList"
                      accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PNG,.GIF,.BMP"
                      ref="upload"
                      style="float: right;">
                      <el-button size="small" type="primary">批量上传</el-button>
                    </el-upload>
                  </div>
                  <el-divider style="width: 100%"/>
                  <div class="demo-image" style="min-height: 700px">
                    <el-row :gutter="20">

                      <el-checkbox-group v-model="urls" :max="num - value.length">

                      <el-col :span="4" v-for="(fit,index) in fileInfoList" :key="index" >
                        <div  style="border-radius: 6px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);display:block;margin-bottom: 3px;margin-top: 3px;" >
                          <el-image
                            style="width: 150px; height: 130px;border-radius: 6px;"
                            :src="fit.fileHttpPath"
                            :preview-src-list="new Array(fit.fileHttpPath)"
                            :fit='"+index+"'></el-image>
                          <el-checkbox style="margin-left: 3px;" :label="fit.fileHttpPath">选择</el-checkbox>
                          <el-button style="float: right;padding: 10px 0px;margin-right: 3px;" size="mini" type="text" icon="el-icon-delete" @click="deleteFileInfo(fit.id)">删除</el-button>
                        </div>
                      </el-col>

                      </el-checkbox-group>


                    </el-row>
                  </div>

                  <div>
                    <pagination
                      v-show="fileTotal>0"
                      :total="fileTotal"
                      :page.sync="fileNowPage"
                      :limit.sync="filePageSize"
                      :page-sizes="[10, 20]"
                      :page-size="filePageSize"
                      @pagination="selectFileInfoList"/>
                  </div>
                  <div style="float: right;padding-top: 30px">
                    <el-button type="primary" @click="getChooseFileList">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                  </div>
                </el-main>
              </el-main>
            </el-container>
          </el-form-item>



        </el-form>

      </el-dialog>
    </div>
</template>
<script>
    import {delFileInfo,getFileInfoPage,addOrUpdateMallMaterialGroup,delMallMaterialGroup,getMallMaterialGroupList} from "@/api/project/mallMaterialGroup/mallMaterialGroup";
    import { getToken } from "@/utils/auth";
    export default {
        name: "WangImage",
        data() {
            return {
                url:'',
                dialogVisible:false,
                urls: [],
                imageArr:[],
                deleteFlag:true,
                chooseGroup:'',
                chooseGroupName:'',
                chooseGroupId:0,
                fileInfoList:[],
                innerVisible: false,
                tabIndex: '0',
                groupRecords: [],
                fileTotal:0,
                fileNowPage:1,
                filePageSize:10,
                // 弹出层标题
                title: "",
                open: false,// 是否显示修改或增加的弹出层
                // 表单参数
                form: {},
                // 表单校验
                rules: {
                    groupName: [
                        { required: true, message: "素材分组名称不能为空", trigger: "blur" }
                    ],
                    groupKey: [
                        { required: true, message: "素材分组key不能为空", trigger: "blur" }
                    ],
                    createBy: [
                        { required: true, message: "创建人id不能为空", trigger: "blur" }
                    ],
                    createByName: [
                        { required: true, message: "创建人名称不能为空", trigger: "blur" }
                    ],
                    sort: [
                        { required: true, message: "排序不能为空", trigger: "blur" }
                    ],
                },
                upload:{
                  // 设置上传的请求头部
                  headers: { Authorization: "Bearer " + getToken() },
                  uploadUrl: process.env.VUE_APP_BASE_API +  '/file/upload',
                  uploadParams:{"fileTypePath":"car","businessName":"汽车"},
                }

            };
        },
        props: {
          // 素材数据
          modalFlag: {
            type: Boolean,
            default() {
              return false
            }
          },
          showDeleteFlag: {
            type: Boolean,
            default() {
              return true
            }
          },
          // 素材数据
          value: {
            type: Array,
            default() {
              return []
            }
          },
          // 素材类型
          type: {
            type: String
          },
          // 素材限制数量，默认5个
          num: {
            type: Number,
            default() {
              return 5
            }
          },
          // 宽度
          width: {
            type: Number,
            default() {
              return 150
            }
          },
          // 宽度
          height: {
            type: Number,
            default() {
              return 150
            }
          }
        },
        methods: {

            getChooseFileList(){
              this.urls.forEach(item => {
               // this.$set(this.value, this.value.length, item)
                this.$emit("fileList",item)
              })
              this.open = false;
              this.urls=[]
            },
            deleteFileInfo(id){
              this.$confirm('是否确认删除素材?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(function() {
                return delFileInfo(id);
              }).then(() => {
                this.selectFileInfoList();
                this.msgSuccess("删除成功");
              }).catch(function() {});
            },
            selectFileInfoList(){
              this.$refs.upload.clearFiles();
              let params ={"businessKey":this.form.groupKey,"nowPage":this.fileNowPage,"pageSize":this.filePageSize}
              getFileInfoPage(params).then(response=>{
                this.fileInfoList = response.data.records;
                this.fileTotal=response.data.total
              })
            },
            dealUploadParams(){
              this.upload.uploadParams.fileTypePath=this.form.groupKey;
              this.upload.uploadParams.businessName=this.form.groupName;
              this.upload.uploadParams.businessKey=this.form.groupKey;
              this.upload.uploadParams.businessId=this.form.id;
            },
            deleteGroup(){
              const ids = this.form.id;
              this.$confirm('是否确认删除素材组名为"' + this.form.groupName + '"的数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(function() {
                return delMallMaterialGroup(ids);
              }).then(() => {
                this.getGroupRecords();
                this.deleteFlag=false;
                this.chooseGroupName='';
                this.chooseGroup='';
                this.fileInfoList=[];
                this.fileTotal=0;
                this.msgSuccess("删除成功");
              }).catch(function() {});
            },
            changeGroupName(){
              this.innerVisible=true;
            },
            addGroup(){
              this.innerVisible=true;
              this.form = {
                groupName:undefined,
                groupKey:undefined,
                createBy:undefined,
                createByName:undefined,
                createTime:undefined,
                sort:undefined,
              };
            },
            /**根据选择的组查询对应的图片*/
            getChooseGroup(e){
              let obj =this.groupRecords.find(item =>item.groupKey==e)
              if(obj){
                this.deleteFlag=true;
                this.chooseGroupName =obj.groupName;
                this.form =obj;
                //todo 查询文件列表
                let params ={"businessKey":this.form.groupKey,"nowPage":this.fileNowPage,"pageSize":this.filePageSize}
                getFileInfoPage(params).then(response=>{
                  this.fileInfoList = response.data.records;
                  this.fileTotal=response.data.total
                })
              }
            },
            /**查询所有有效组*/
            getGroupRecords(){
              getMallMaterialGroupList().then(response=>{
                this.groupRecords = response.data;
              })
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.innerVisible = false;
                this.reset();
            },
            closeDialog(){
              this.open = false;
              this.innerVisible = false;
              this.reset();
            },
            cancelDialog() {
                this.innerVisible = false;
            },
            // 表单重置
            reset() {
                this.deleteFlag=true;
                this.form = {
                    groupName:undefined,
                    groupKey:undefined,
                    createBy:undefined,
                    createByName:undefined,
                    createTime:undefined,
                    sort:undefined,
                };
                this.resetForm("form");
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.title = "添加素材信息";
                getMallMaterialGroupList().then(response=>{
                  this.groupRecords = response.data;
                  if(this.groupRecords.length>0){
                    this.deleteFlag=true;
                    let obj =this.groupRecords[0];
                    this.form =obj;
                    this.chooseGroupName=obj.groupName;
                    this.chooseGroup=obj.groupKey;
                    let params ={"businessKey":this.form.groupKey,"nowPage":this.fileNowPage,"pageSize":this.filePageSize}
                    getFileInfoPage(params).then(response=>{
                      this.fileInfoList = response.data.records;
                      this.fileTotal=response.data.total
                    })
                  }else{
                    this.deleteFlag=false;
                  }
                })
            },
            /** 提交按钮 */
            submitForm: function() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                      if (this.form.id !== undefined) {
                        addOrUpdateMallMaterialGroup(this.form).then(res=>{
                          if (res.code == 200) {
                            this.getGroupRecords();
                            this.chooseGroupName=this.form.groupName;
                            this.chooseGroup=this.form.groupName;
                            this.msgSuccess("修改成功");
                            this.innerVisible = false;
                            this.deleteFlag=true;
                          } else {
                            this.msgError(res.msg);
                          }
                        })
                      } else {
                        addOrUpdateMallMaterialGroup(this.form).then(res=>{
                          if (res.code == 200) {
                            this.getGroupRecords();
                            this.msgSuccess("新增成功");
                            this.form=res.data;
                            this.chooseGroupName=this.form.groupName;
                            this.chooseGroup=this.form.groupName;
                            this.fileInfoList=[];
                            this.fileTotal=0;
                            this.innerVisible = false;
                            this.deleteFlag=true;
                          } else {
                            this.msgError(res.msg);
                          }
                        })
                      }
                    }
                });
            },
        }
    };
</script>
<style lang="scss" scoped>

  .group_dialog {
        display: flex;
        justify-content: center;
        align-items: Center;
        overflow: hidden;
        .el-dialog {
           margin: 0 auto !important;
           min-height: 1200px;
           overflow: hidden;
          .el-dialog__body {
            position: absolute;
            left: 0;
            top: 10px;
            bottom: 0;
            right: 0;
            padding: 0;
            z-index: 1;
            overflow: hidden;
            overflow-y: auto;
          }
       }
  }

</style>
